<template>
	<view class="tab-bar" :class="[theme]">
		<view v-for="(item, index) in computedTabList" :key="item.title"
			:class="['tab-bar-item', { active: item.title === PropsData.current }]" @click="handleTabSwitch(index)">
			<template v-if="item.title === PropsData.current">
				<view class="active-img-box">
					<image :src="item[`active_${theme}`]" class="image" />
				</view>
			</template>
			<template v-else>
				<image :src="item.icon" class="image" />
			</template>
			<text class="title">{{ item.title }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { storeToRefs } from 'pinia';
	import { ref, defineProps, computed, watch } from 'vue';
	import { useThemeStore } from '../store/themeStore';
	import { useModuleDataStore } from '../store/useModuleDataStore';

	// 使用 store 获取主题
	const themeStore = useThemeStore();
	const { theme } = storeToRefs(themeStore);

	// 定义 Props
	const PropsData = defineProps(['current']);

	// uni.getStorageSync('tabBarData')
	let _tabBarData = uni.getStorageSync('tabBarData') ? JSON.parse(uni.getStorageSync('tabBarData')) : [];
	// 定义响应式状态
	const storedData = ref();

	// 计算 tabList
	const computedTabList = computed(() => {
		console.log('storedData.value'+JSON.stringify(storedData.value));
		return storedData.value ? storedData.value : [];
	});

	// 使用 moduleDataStore
	const moduleDataStore = useModuleDataStore();

	// 监听 moduleDataStore.tabBarData 的变化
	watch(() => moduleDataStore.tabBarData, (newVal) => {
		if (newVal.length > 0) {
			storedData.value = newVal;
		}
	}, { immediate: true });

	// 处理 tab 切换
	const handleTabSwitch = (index : number) => {
		if (PropsData.current !== computedTabList.value[index].title) {
			if (computedTabList.value[index].title == '应用' || computedTabList.value[index].title == '我的') {
				uni.switchTab({
					url: computedTabList.value[index].pagePath,
				});
			} else {
				if (computedTabList.value[index].title == '首页') {
					uni.navigateTo({
						url: '/packages/MainViews/main/main'
					});
				} else if (computedTabList.value[index].title == '看板') {
					uni.navigateTo({
						url: '/packages/MainViews/dashboard/index'
					});
				} else if (computedTabList.value[index].title == '任务') {
					uni.navigateTo({
						url: '/packages/MainViews/taskList/taskList'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		box-sizing: border-box;
		height: calc(118rpx + env(safe-area-inset-bottom));
		background-color: transparent;
	}

	.tab-bar-item {
		position: relative;
		margin-top: 20rpx;
		padding: 15rpx 0 8rpx;
		height: 98rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		color: #333;
		background: #FFFFFF;
		box-sizing: border-box;

		&::before {
			content: "";
			position: absolute;
			top: 1px;
			left: 0;
			width: 100%;
			height: 1px;
			box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.5);
			z-index: -1;
		}

		image {
			width: 39rpx;
			height: 39rpx;
		}

		.title {
			font-size: 10px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #888888;
			text-shadow: 0px -16px 40px rgba(238, 238, 238, 0.3);
		}
	}

	.tab-bar-item.active {
		position: relative;
		display: flex;
		padding-top: 0;
		justify-content: flex-end;

		.active-img-box {
			position: absolute;
			top: -20rpx;
			width: 92rpx;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -16rpx 40rpx 0rpx rgba(238, 238, 238, 0.2);
			border-radius: 50%;

			.image {
				width: 68rpx;
				height: 68rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.title {
			color: var(--theme-color);
			z-index: 99;
		}
	}
</style>